<template>
  <el-dialog @closed="closed" title="导入质控点" :close-on-click-modal="false" :visible.sync="addTemplatePoint.visible" width="700px">
    <el-form :model="fileForm" :rules="rules" ref="fileForm" label-width="100px" class="demo-fileForm">
      <el-form-item label="选择文件" prop="filePath">
        <el-upload ref="upload" class="upload-demo" drag :http-request="Upload" :with-credentials="true" :on-remove="fileRemove" :on-exceed="onExceed" multiple :multiple="false" :limit="1">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addTemplatePoint.visible = false">取 消</el-button>
      <el-button type="primary" @click="uploadFile">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addTemplatePoint } from '@/api/target.js'
export default {
  props: {
    addTemplatePoint: {
      type: Object
    },
    targetStandardId: {
      type: [String, Number]
    }
  },
  data() {
    return {
      fileForm: {},
      rules: {}
    }
  },
  methods: {
    fileRemove() {
      this.fileForm.filePath = ''
      this.fileForm.fileType = ''
    },
    onExceed() {
      this.$message.error('请先移除下方已经上传的文件再重新上传！')
    },
    Upload(params) {
      const file = params.file

      const form = new FormData()
      form.append('file', file)
      form.append('targetStandardId', this.targetStandardId)
      addTemplatePoint(form).then(res => {
        this.$emit('addTemplateSuccess')
        this.$message.success('操作成功')
        this.addTemplatePoint.visible = false
      })
      // uploadFile(form).then((res, res2) => {
      //   this.fileForm.filePath = res
      // })
    },
    uploadFile() {
      this.addTemplateVisible.visible = false
    },
    closed() {
      this.$refs.upload.clearFiles()
    }
  }
}
</script>

<style>
</style>
